<template>
	<view class="">
		<u-popup :show="show" mode="right" width="100%" :zoom="false">
			<u-navbar title="分润设置" @leftClick="
          () => {
            show = !show;
          }
        " :autoBack="false"></u-navbar>

			<view>
				<view class="u-flex" style="padding: 30rpx">
					<u-tag type="primary" mode="dark" shape="circle">
						<view class="u-flex" @click="typeshow = !typeshow">
							{{ xstypexs }}
							<u-icon name="arrow-down"></u-icon>
						</view>
					</u-tag>
					<u-search placeholder="搜索" v-model="searchstr" :show-action="false"></u-search>
				</view>
				<view v-if="ifpt" class="useritem" @click="itemtap({ frid: 'type1' })">
					<view class="radio" v-bind:class="{ radioactive: activefrid == 'type1' }"></view>
					<view class="text">{{$z.$t("平台")}}</view>
				</view>

				<view class="useritem" v-for="(d, index) in usearchsxs" :key="index" @click="itemtap(d)">
					<view class="radio" v-bind:class="{ radioactive: d.frid == activefrid }"></view>
					<view class="text">
						{{ d["uUser"] }}-{{ d["uxm"] }}-{{ d["utel"] }}-{{
              utypexsfn(d["utype"])
            }}
					</view>
				</view>
				<fixedbtn>
					<view class="u-flex" style="flex: 1">
						<view class="ltext">{{$z.$t("当前用户")}}：{{ activeuser.uUser }}</view>
						<u-button type="primary" :custom-style="btnstyle" size="medium"
							style="width: auto; padding: 0 40rpx" @click="adduser()">
							{{$z.$t("添加分润方")}}
						</u-button>
						<u-button type="primary" size="medium" style="width: auto; padding: 0 40rpx"
							@click="qrUSearchbtnfn()">
							{{$z.$t("确认")}}
						</u-button>
					</view>
				</fixedbtn>
			</view>
		</u-popup>
		<u-select :mask-close-able="false" v-model="typeshow" :list="options" @confirm="confirm"></u-select>
		<uadd ref="uadd"></uadd>
	</view>
</template>

<script>
	import uadd from "./uadd.vue";
	export default {
		components: {
			uadd,
		},
		props: {
			usearchs: {
				typeof: Object,
				default: () => {
					return [];
				},
			},
			user: {
				typeof: Object,
				default: () => {
					return {};
				},
			},
			station: {
				typeof: Object,
				default: () => {
					return {};
				},
			},
			statfr: {
				typeof: Object,
				default: () => {
					return [];
				},
			},
			mode: {
				typeof: [String, Number],
				default: "0",
			},
		},
		data() {
			return {
				btnstyle: {
					marginRight: "20rpx",
				},
				show: false,
				typeshow: false,
				activefrid: "",
				searchstr: "",
				xstype: "",
			};
		},
		computed: {
			activeuser() {
				let r = this.usearchs.find((e) => {
					return e.frid == this.activefrid;
				});
				return r ? r : {};
			},
			usearchsxs() {
				let r = this.usearchs.filter((e) => {
					if (
						!(
							this.xstype == "" ||
							this.xstype == e.utype ||
							(this.xstype == "20" && e.utype == "11")
						)
					) {
						return false;
					}
					let str = `${e.uUser}${e.uxm}${e.utel}`;
					if (this.searchstr == "" || str.indexOf(this.searchstr) >= 0) {
						return true;
					}
				});
				return r;
			},
			utype() {
				let utype = [{
						value: "0",
						label: this.$z.$t("代理商"),
					},
					{
						value: "1",
						label: this.$z.$t("安装员"),
					},
					{
						value: "7",
						label: this.$z.$t("查看员"),
					},
					{
						value: "2",
						label: this.$z.$t("办卡人员"),
					},
					{
						value: "9",
						label: this.$z.$t("财务人员"),
					},
					{
						value: "10",
						label: this.$z.$t("商家"),
					},
					{
						value: "14",
						label: this.$z.$t("自助注册用户"),
					},
					{
						value: "15",
						label: this.$z.$t("维护账户"),
					},
					{
						value: "22",
						label: this.$z.$t("维修查看员"),
					},
					{
						value: "18",
						label: this.$z.$t("自定义用户"),
					},
					{
						value: "19",
						label: this.$z.$t("合作伙伴"),
					},
					{
						value: "20",
						label: this.$z.$t("物业"),
					},
					{
						value: "21",
						label: this.$z.$t("优惠卡管理员"),
					},
				];
				utype = utype.filter((e) => {
					return this.usearchs.find((f) => {
						return f.utype == e.value;
					});
				});
				return utype;
			},
			options() {
				let r = [{
					label: this.$z.$t("全部"),
					value: "",
				}, ];
				if (
					this.mode != "1" &&
					(this.user.utype == "4" || this.user.utype == "3")
				) {
					r.push({
						label: this.$z.$t("平台"),
						value: "type1",
					});
				}
				r = r.concat(this.utype);
				return r;
			},
			xstypexs() {
				let r = this.options.find((f) => {
					return f.value == this.xstype;
				});
				return r ? r.label : this.xstype;
			},
			ifpt() {
				if (this.mode == "1") {
					return false;
				}
				if (!(this.user.utype == "4" || this.user.utype == "3")) {
					return false;
				}

				if (!(this.xstype == "" || this.xstype == "type1")) {
					return false;
				}
				if (this.searchstr == "" || this.$z.$t("平台").indexOf(this.searchstr) >= 0) {
					return true;
				}
			},
		},
		methods: {
			adduser() {
				this.show = false;
				this.$refs.uadd.init({
					pcs: this.station.id,
				});
			},
			async init() {
				this.show = true;
			},
			qrUSearchbtnfn() {
				let p = this.$u.$parent.call(this, "StatFrecharts");
				if (this.activefrid == "type1") {
					var adddata = {
						frid: "new" + this.statfr.length,
						per: p.sybfb(),
						pcs: p.query.id,
						pcsxs: p.query.idxs,
						pfrid: "0",
						pernx: "0",
						nxl: "0",
						mode: "0",
					};
					adddata.type = "1";
					adddata.mc = this.$z.$t("平台");
					let statfr = this.$u.deepClone(this.statfr);
					statfr.push(adddata);
					this.$emit("itemchange", statfr);
				} else if (this.activefrid) {
					// activeuser
					let dqUSearch = this.activeuser;
					let fr = p.sybfb(
						p.StatFr.filter((e) => {
							return e.mode == p.mode;
						})
					);
					if (fr < 0) {
						fr = "0";
					}
					var adddata = {
						frid: "new" + this.statfr.length,
						per: fr,
						pcs: p.query.id,
						pcsxs: p.query.idxs,
						pfrid: "0",
						pernx: "0",
						nxl: "0",
						mode: p.mode,
					};
					let uUsert_fridt = [{
							fridtype: "0",
							uUsert: ["0", "14", "18", "19"],
						},
						{
							fridtype: "2",
							uUsert: ["11", "20"],
						},
						{
							fridtype: "5",
							uUsert: ["12"],
						},
					];
					var datatype = uUsert_fridt.find(function(e) {
						return (
							e.uUsert.findIndex(function(f) {
								return f == dqUSearch.utype;
							}) >= 0
						);
					});
					datatype = datatype ? datatype.fridtype : "0";

					adddata.type = datatype;
					adddata.pfrid = this.activefrid;
					let typepfrids = {
						0: this.$z.$t("代理商"),
						2: this.$z.$t("物业"),
						5: this.$z.$t("自定义"),
						8: this.$z.$t("一级分润方"),
						9: this.$z.$t("二级分润方"),
					};
					let mc = dqUSearch.uxm ?
						dqUSearch.uxm :
						p.Station.pcs + "-" + typepfrids[datatype];
					adddata.mc = mc;

					let statfr = this.$u.deepClone(this.statfr);
					statfr.push(adddata);
					this.$emit("itemchange", statfr);
				}
				this.show = false;
				console.log(this.activefrid, "activefrid");
			},
			confirm(e) {
				this.xstype = e[0].value;
			},
			itemtap(item) {
				this.activefrid = item.frid;
			},
			utypexsfn(utype) {
				if (utype == "11") {
					return this.$z.$t("物业");
				}
				let r = this.utype.find((e) => {
					return e.value == utype;
				});
				return r ? r.label : utype;
			},
		},
	};
</script>

<style lang="scss">
	.ltext {
		font-size: 32rpx;
		flex: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 0;
	}

	.useritem {
		padding: 16rpx 0;
		line-height: 50rpx;
		position: relative;
		display: flex;
		align-items: center;
		font-size: 34rpx;
		padding-right: 20rpx;

		.radio {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			border: 4rpx solid #aaa;
			margin: 0 20rpx 0 20rpx;
		}

		.radioactive {
			position: relative;
			border: 4rpx solid #2093f5;

			&::after {
				content: "";
				width: 30rpx;
				height: 30rpx;
				background-color: #2093f5;
				position: absolute;
				top: 6rpx;
				left: 6rpx;
				border-radius: 50%;
			}
		}

		.text {
			flex: 1;
		}

		&::after {
			position: absolute;
			right: 0;
			bottom: 0;
			left: 15px;
			height: 1px;
			content: "";
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
			background-color: #eeeeee;
		}
	}
</style>